import { Row, Col, Form, Input, Button, Select, message, Table, Tag, Avatar, Popconfirm } from "antd"
import { useEffect, useRef, useState } from "react"
import { $http } from "../../api";
import { observer } from "mobx-react"
import { mbdata } from "../../mobx/data"

import * as echarts from "echarts";

export default function UserFenxi() {

  useEffect(() => {
    IniChartMapOne()
    getuserList()   // 成功回调去渲染数据 echart
  }, [])


  const getuserList = () => {
    $http.getuserlist()
      .then(res => {
        if (res.code == 200) {
          mbdata.changeUserList(res.result);
          IniChartMapTwo(res.result)
        }
      })
  }

  function IniChartMapOne() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mainone'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '千锋转介绍数据展示'
      },
      tooltip: {},
      legend: {
        data: ['人数']
      },
      xAxis: {
        data: ["1班", "2班", "3班", "4班", "5班", "6班"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        // type: 'bar',
        type: "line",
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }


  function IniChartMapTwo(data) {
    var myChart = echarts.init(document.getElementById('maintwo'));
    var option = {
      title: {
        text: "千锋人员比例分析",
        subtext: "真实的后台数据",
        left: "center"
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '人员比例',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: data.filter(item => item.role == 0).length, name: '学员' },
            { value: data.filter(item => item.role == 1).length, name: '班主任' },
            { value: data.filter(item => item.role == 2).length, name: '讲师' },
            { value: data.filter(item => item.role == 3).length, name: '管理员' },
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  return (
    <div>
      <h2> 用户数据分析</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={11} offset={0} style={{ display: 'flex', height: 420, border: '1px solid #111', borderRadius: 10 }}>
          <div id="mainone" style={{ width: '100%', height: 420 }} ></div>
        </Col>
        <Col className="" offset={1} span={11} style={{ display: 'flex', height: 420, border: '1px solid #111', borderRadius: 10 }}>
          <div id="maintwo" style={{ width: '100%', height: 420 }} ></div>
        </Col>
      </Row>
    </div>
  )
}